<template>
  <div class="HeadBar">
    <div class="bar">
      <span class="uicon">
        <a href="javascript:;" v-if="$store.state.token">
          <img src="../../state/img/login01.jpg" alt="" @click="goMain"
        /></a>
      </span>
      <span class="menu"
        ><a href="javascript:;" class="iconfont">&#xe616;</a></span
      >
      <ul>
        <li
          :class="{
            option: 'option',
            iconfont: 'iconfont',
            change: active === index,
          }"
          v-for="(value, index) in barList"
          :key="value"
          @click="goItem(index)"
        >
          {{ value }}
        </li>
      </ul>
      <div class="search">
        <div class="searchBox" v-if="$store.state.token">
          <input type="text" class="inp" placeholder="请输入" id="sou" />
          <label class="iconfont icon" for="sou">&#xe6a3;</label>
        </div>
        <el-button
          type="primary "
          size="mini"
          round
          class="inOut"
          v-if="$store.state.token"
          @click="outLogin"
          >退出</el-button
        >
        <el-button
          type="primary "
          size="mini"
          round
          class="inOut"
          v-else
          @click="goLogin"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HeadBar',
    data() {
      return {
        //  li 导航栏 数据
        barList: [
          '\ue843首页',
          '\ue660归档',
          '\ue22f收集',
          '\ue609学习',
          '\ue617随笔',
          '\ue60b相册',
          '\ue630留言',
          '\ue63a幼稚园',
          '\ue614关于',
        ],
        active: 0, //下标
      };
    },

    methods: {
      // 登录
      goLogin() {
        this.$router.push('/login');
      },
      // 退出
      outLogin() {
        this.$store.state.token = '';
        localStorage.removeItem('token');
        this.$router.replace('/login');
        this.$message({
          message: '已退出',
          type: 'success',
        });
      },
      goItem(index) {
        this.active = index;
        //  0 首页
        if (index === 0) {
          // 跳往 首页
          this.$router.push('/main');
        } else if (index === 1) {
          // 跳往 归档 1
          this.$router.push('/file');
        } else if (index === 2) {
          // 跳往 收集 1
          this.$router.push('/collect');
        } else if (index === 3) {
          // 跳往 学习
          this.$router.push('/study');
        } else if (index === 4) {
          // 跳往 随笔
          this.$router.push('/essays');
        } else if (index === 5) {
          // 跳往 相册
          this.$router.push('/pro');
        } else if (index === 6) {
          // 跳往 留言
          this.$router.push('/leave');
        } else if (index === 7) {
          // 跳往 幼稚园
          this.$router.push('/child');
        } else if (index === 8) {
          // 跳往 关于
          this.$router.push('/about');
        }
      },
      //  点击头像
      goMain() {
        // 跳往 首页
        this.$router.push('/main');
      },
    },
  };
</script>

<style lang="less" scoped>
  @import url('../../state/css/headBar/headBar.css');

  .change {
    color: #fb6c28;
    border-bottom: 2px solid #fb6c28;
  }
</style>
